<template>
    <div class="hello">
        <div id="page" class="layout">
            <div>
                <!-- 截图区域 -->
                <div class="content" id="content" ref="content" v-html="printData"></div>
                <!-- 点击调用方法获取截图 -->
                <div>
                    <button class="btn" @click="getPrintScreen">截图预览</button>
                </div>
            </div>
            <div>
                <div class="img-box">
                    <!-- 通过img标签把获取到的截图呈现出来 -->
                    <img :src="imgUri" alt="" crossOrigin="anonymous"/>
                </div>
                <div id="img">
                    <button class="btn" @click="getPicState">图片另存为</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import html2canvas from "html2canvas";

export default {
    name: 'HelloWorld',
    data() {
        return {
            imgUri: null, //截图地址
            printData: "<div style=\"width: 500px;height: auto;background-image: url(\"logo.png\");margin: 0 auto;padding: 0;\"><h2 style=\"margin: auto\">this is title!</h2><img id='image' src=\"http://cdn.mockplus.cn/image/2018/07/66ea4904-2cea-4fc4-860d-668f0dc956f2.png\" alt=\"\" style=\"margin:0 auto;width:500px;height:auto;\"><p style=\"color:green\">vue项目中使用html2canvas截图不全的问题 原因：横向滚动轮造成，因为html2canvas是根据body进行截图，若内容宽度长于body时，就会出现这样的问题(大概意思就是有滚动条时造成的) Y-SA版权协议，转载请附上原文出处链接及本声明。 vue项目中使用html2canvas截图不全的问题 原因：横向滚动轮造成，因为html2canvas是根据body进行截图，若内容宽度长于body时，就会出现这样的问题(大概意思就是有滚动条时造成的) 解决方案：(首先是获取你要截取页面的父div，通过clone并紧随于body之后，在生成幕布的时候不再拿着父div去截取，而是截取clone的div，这样的话，就可以实现整个页面的截取了。)不能使用跨源的图片。若是使用了，html2canvas将不会读取资源</p></div>\n",
            // 模拟富文本编辑器场景
        }
    },
    methods: {

        // 获取截图方法
        getPrintScreen() {
            // var imgReg = /<img.*?(?:>|\/>)/gi;
            // let arr = this.printData.match(imgReg)
            // // console.log(arr)
            // let imgArr = []
            // for (let i = 0; i < arr.length; i++) {
            //     let img = arr[i].match(arr)
            //     // 获取图片地址
            //     imgArr.push(img[1])
            // }
            // var file = document.getElementById("image").files[0];
            // var reader = new FileReader();
            // reader.readAsDataURL(file);
            // reader.onload = function () {
            //     var result = document.getElementById("img");
            //     result.innerHTML = '<img src="' + this.result + '" alt=""/>'
            // }
            setTimeout(() => {
                //这里可用 $("#content");document.getElementById('content');
                html2canvas(this.$refs.content, {
                    // width: 30, //截图宽度
                    // height: 50, //截图高度
                    backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
                    useCORS: true, //支持图片跨域
                    tainttest: true,//检测图片已经全部加载完成
                    scrollX: 0,//解决滚动导致截图不全
                    scrollY: 0,
                    scale: 1, //解决高清屏图片模糊
                    allowTaint: false,//允许污染画布
                }).then((canvas) => {
                    // 把生成的base64位图片上传到服务器,生成在线图片地址
                    let url = canvas.toDataURL("image/png", 1.0); // toDataURL: 图片格式转成 base64   replace("image/png","image/octet-stream")
                    this.imgUri = url;
                    console.log(this.imgUri)
                })
            }, 2000)//设置延时防止图片未加载就截图
        },

        // getPrintScreen() {
        //     //var canvas_multiple = localStorage.getItem('canvas-multiple');
        //     var canvas_multiple = "1";
        //
        //     var realHtml = document.getElementById("content");//需要截图的包裹的（原生的）DOM 对象
        //     var width = realHtml.offsetWidth; //获取dom 宽度
        //     var height = realHtml.offsetHeight; //获取dom 高度
        //     var canvas = document.createElement("canvas"); //创建一个canvas节点
        //     var scale = canvas_multiple; //定义任意放大倍数 支持小数
        //     canvas.width = width * scale; //定义canvas 宽度 * 缩放
        //     canvas.height = height * scale; //定义canvas高度 *缩放
        //     canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
        //     var opts = {
        //         //allowTaint:true,//允许加载跨域的图片
        //         tainttest: true, //检测每张图片都已经加载完成
        //         scale: scale, // 添加的scale 参数
        //         useCORS: true,
        //         canvas: canvas, //自定义 canvas
        //         logging: true, //日志开关
        //         width: width, //dom 原始宽度
        //         height: height //dom 原始高度
        //     };
        //

        //     // html2canvas(realHtml, opts).then(function (canvas) {
        //     //     //如果想要生成图片 引入canvas2Image.js 下载地址：
        //     //     //https://github.com/hongru/canvas2image/blob/master/canvas2image.js
        //     //     //var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
        //     //     /*imgUri = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");*/
        //     //     imgUri = canvas.toDataURL("image/jpeg");
        //     //     $('#prompt').css('display','block');
        //     //     $('#img').attr('src',imgUri);
        //     // });
        //
        //     html2canvas(realHtml, opts).then(canvas => {
        //         this.imgUri = canvas.toDataURL("image/png");
        //     });
        // },
        //下载图片方法
        getPicState() {
            var eleLink = document.createElement('a')
            eleLink.href = this.imgUri // 转换后的图片地址
            eleLink.download = 'pictureName'
            // 触发点击
            document.body.appendChild(eleLink)
            eleLink.click()
            // 然后移除
            document.body.removeChild(eleLink)
        }
        ,
    }
}
</script>
<style scoped>
.layout {
    display: flex;
    justify-content: space-around;
}

.content {
}
</style>